const draw = (container: HTMLCanvasElement, data: any[]) => {
    if (!container.getContext) {
        return;
    }
    let ctx: CanvasRenderingContext2D | null = container.getContext('2d');
    if (!ctx) {
        return;
    }
    const width = container.width;
    const height = container.height;
    const widthCenter = Math.floor(container.width / 2);
    // 标线
    ctx.beginPath();
    ctx.moveTo(widthCenter, 0);
    ctx.lineTo(widthCenter, height);
    ctx.closePath();
    ctx.stroke();

    rectangle(ctx, { widthCenter });
    line(ctx, [[widthCenter - 50, 50 + 25], [widthCenter - 50 - 50, 50 + 25]], { color: 'black' });
    text(ctx, '部门', [widthCenter - 80, 50 + 25 + 3], { color: 'red' });
}
// 文字
const text = (ctx: CanvasRenderingContext2D, text: string, coordinate: [number, number], options?: any) => {
    ctx.font = options?.font;
    ctx.fillStyle = options?.color;
    ctx.fillText(text, coordinate[0], coordinate[1]);
}
// 连线
const line = (ctx: CanvasRenderingContext2D, coordinates: [[number, number], [number, number]], options?: any) => {
    ctx.lineWidth = options?.width;
    ctx.strokeStyle = options?.color;
    ctx.beginPath();
    ctx.moveTo(coordinates[0][0], coordinates[0][1]);
    ctx.lineTo(coordinates[1][0], coordinates[1][1]);
    ctx.closePath();
    ctx.stroke();
}
// 矩形
const rectangle = (ctx: CanvasRenderingContext2D, { widthCenter }: any) => {
    // 宽度100，坐标起始点 widthCenter - 50
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(widthCenter - 50, 50);
    ctx.lineTo(widthCenter + 50, 50);
    ctx.lineTo(widthCenter + 50, 100);
    ctx.lineTo(widthCenter - 50, 100);
    ctx.closePath();
    ctx.stroke();
}

export default draw;